<template>
  <nav class="navbar-box">
    <div class="clearfix">
      <h3 class="site-navbar__menu" style="font-style: oblique" @click="backClick()">让一切变得简单</h3>
      <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
        <el-menu-item index="2" v-for="(item, index) in Menus" :key="index">
          <el-badge value>
            <router-link :to="{ name: item.to }">{{ item.name }}</router-link>
          </el-badge>
        </el-menu-item>

        <el-menu-item class="site-navbar__avatar" index="3">
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link">
              <img
                class="img-avatar"
                :src="userAvatar"
                v-if="userAvatar != ''"
                style="width: 40px; height: 40px; border-radius: 50%"
              />
              <!-- <el-avatar :size="30" :src="userAvatar" v-if="userAvatar != ''" fit="fill">
              </el-avatar>-->
              <img v-else src="~@/assets/images/avatar.png" :alt="userName" />
              {{
              userName
              }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="updateUserInfo()">个人设置</el-dropdown-item>
              <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>

    <!-- 弹窗, 修改个人信息 -->
    <main-navbar-update-userinfo v-if="updateUserInfoVisible" ref="updateUserInfo"></main-navbar-update-userinfo>
  </nav>
</template>

<script>
import UpdatePassword from './main-navbar-update-password';
import { clearLoginInfo } from '@/utils';
import MainNavbarUpdateUserinfo from './main-navbar-update-userinfo.vue';
export default {
  inject: ['reload'],
  data() {
    return {
      Menus: [],
      teacherMenus: [
        { name: "课程主页", to: "course" },
        { name: "我的数据", to: "" },
        // { name: "关于我们", to: "#" },
        // { name: "签到管理", to: "#" },
        // { name: "题库管理", to: "#" },
        // { name: "数据监控", to: "#" },
      ],
      studentMenus: [
        { name: '我的课程', to: '#' },
        { name: '我的数据', to: '#' },
      ],
      updatePassowrdVisible: false,
      updateUserInfoVisible: false,
    };
  },
  components: {
    UpdatePassword,
    MainNavbarUpdateUserinfo,
  },
  created() {
    this.setMenus();
  },
  computed: {
    // mainTabs: {
    //   get() {
    //     return this.$store.state.common.mainTabs;
    //   },
    //   set(val) {
    //     this.$store.commit("common/updateMainTabs", val);
    //   },
    // },
    userName: {
      get() {
        return this.$store.state.user.name;
      },
    },
    userAvatar: {
      get() {
        return this.$store.state.user.avatar;
      },
    },
  },
  methods: {
    backClick() {
      this.$router.push('/student');
    },
    setMenus() {
      if (this.$store.state.user.userType == 'teacher') {
        this.Menus = this.teacherMenus;
      }
      if (this.$store.state.user.userType == 'student') {
        this.Menus = this.studentMenus;
      }
    },
    //个人信息修改
    updateUserInfo() {
      this.updateUserInfoVisible = true;
      this.$nextTick(() => {
        this.$refs.updateUserInfo.init();
      });
    },

    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true;
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init();
      });
    },

    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          var userType = this.$cookie.get('userType');
          var URLPATH = '';
          if (userType == 'student') {
            URLPATH = '/edu-student/logout';
          }
          if (userType == 'teacher') {
            URLPATH = '/edu-teacher/logout';
          }
          this.$http({
            url: this.$http.adornUrl(URLPATH),
            method: 'post',
            data: this.$http.adornData(),
          }).then(({ data }) => {
            if (data && data.code === 20000) {
              clearLoginInfo();
              this.$router.push({ name: 'login' });
            } else {
              this.$message.error('退出失败！');
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.navbar-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-width: 990px;
  background-color: #fff;
  border-bottom: 1px solid #dcdfe6;
  z-index: 99;
}
.clearfix {
  width: 81%;
  margin: 0 auto;
}
.site-navbar__menu {
  color: #606266;
  line-height: 50px;
}
</style>
